<template>
  <div>
    <div class="personalCenter" :style="pStyle">
      <div class="banner" :style="{height:boxHeight,minHeight:'700px'}">
        <div class="content">
          <div @click="goBack"><span class="el-icon-arrow-left"></span>返回</div>
          <div>个人中心</div>
          <!-- <div>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div> -->
        </div>
        <hr>
        <div class="con">
          <div class="left">
            <p class="img">
              <span class="header"></span>
            </p>
            <el-menu
              :default-active="defaultActive"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              @select="select">
              <el-menu-item index="center">
                <i class="el-icon-menu"></i>
                <span slot="title">用户中心</span>
              </el-menu-item>
              <el-menu-item index="userAddress">
                <i class="el-icon-document"></i>
                <span slot="title">我的地址</span>
              </el-menu-item>
              <el-menu-item index="MyOrders">
                <i class="el-icon-setting"></i>
                <span slot="title">我的订单</span>
              </el-menu-item>
              <el-menu-item index="shoppingCart">
                <i class="el-icon-setting"></i>
                <span slot="title">我的购物车</span>
              </el-menu-item>
            </el-menu>
          </div>
          <div class="right" ref="right">
            <router-view ref="view"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'personalCenter',
  data(){
    return {
      boxHeight:"",
      pStyle:{},
      defaultActive:'center'
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    select(val){
      this.$router.push({name:val})
    },
  },
  mounted(){
    this.defaultActive = window.localStorage.userCurrentState
    setTimeout(() => {
      this.boxHeight = this.$refs.view.$el.clientHeight+150+'px'
      this.$nextTick(()=>{
        this.pStyle = {
          'min-height':this.$refs.right.offsetHeight+120+"px"
        }
      })
    }, 100);
  },
  watch:{
    '$route':function(){
      window.localStorage.setItem('userCurrentState',this.$route.name)
      setTimeout(() => {
        this.$nextTick(()=>{
          this.boxHeight = this.$refs.view.$el.clientHeight+150+'px'
        })
      }, 100);
    }
  }
}
</script>

<style lang="less" scope>
.personalCenter{
  @import "~@/less/banner.less";
  position: relative;
  height: 100%;
  .con{
    margin-top: 100px;
    position: relative;
    height: calc(100% - 152px);
    .left{
      height: 100%;
      padding-top: 20px;
      position: absolute;
      left: 0;
      width: 150px;
      background: rgb(84, 92, 100);
      .img{
        margin: 0;
        text-align: center;
        box-sizing: border-box;
        .header{
          display: inline-block;
          width: 100px;
          height:100px;
          border-radius: 50%;
          background: black;
        }
      }
    }
    .right{
      position: absolute;
      top: 0;
      height: 100%;
      right: 0;
      width: calc(100% - 170px);
      padding: 10px 10px;
    }
  }
}
</style>